<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>弹出窗口</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="jquery.min.js"></script>
  <script>
    window.onload=function(){
        var sex=$(".sex")
        var state=$(".state")
     $.ajax({
                  url:"http://127.0.0.1:81/getdata",
                  async:true,
                  method:"GET",
                  success:function(data){
                      JSON.parse(data).forEach((item)=>{
                          var ne = $("#tem").clone(true);
                          ne.addClass("cd");
                          ne.removeClass("hide");
                          ne.find('td').eq(0).html(item.id);
                          ne.find('td').eq(1).html(item.name);
                          ne.find('td').eq(2).html(item.sex);
                          ne.find('td').eq(3).html(item.date);
                          ne.find('td').eq(4).html(item.department);
                          ne.find('td').eq(5).html(item.salary);
                          ne.find('td').eq(6).html(item.mob);
                          ne.find('td').eq(7).html(item.state);
                          $("#tem").before(ne);
                    });
                },
                error:function(data){
                     // alert("添加失败")
                   },
            })
      $("#newbut").click(function(){
           $("#body").css({"display":"block",
                          "width":`${$(document).width()}px`,
                          "height":`${$(document).height()}px`
                          });
         })
       $("#quxiao").click(function(){
           $("#body").css("display","none");
           $("input").val("")
           sex[0].checked=true;
           state[0].checked=true;
         })
       $("#queding").click(function(){
              for(q=0;q<sex.length;q++){
                  if (sex[q].checked==true) {
                     Sex = sex[q].value;
                  }
                }
              for(j=0;j<state.length;j++){
                  if (state[j].checked==true) {
                      State = state[j].value;
                  }
              }
              $.ajax({
                  url:"http://127.0.0.1:81/tianjia",
                  async:true,
                  method:"GET",
                  success:function(data){
                        $(".cd").remove();
                      JSON.parse(data).forEach((item)=>{
                          var ne = $("#tem").clone(true);
                          ne.addClass("cd");
                          ne.removeClass("hide");
                          ne.find('td').eq(0).html(item.id);
                          ne.find('td').eq(1).html(item.name);
                          ne.find('td').eq(2).html(item.sex);
                          ne.find('td').eq(3).html(item.date);
                          ne.find('td').eq(4).html(item.department);
                          ne.find('td').eq(5).html(item.salary);
                          ne.find('td').eq(6).html(item.mob);
                          ne.find('td').eq(7).html(item.state);
                          $("#tem").before(ne);
                    });
                    $("#body").css("display","none");
                    $("input").val("")
                    sex[0].checked=true;
                    state[0].checked=true;
                },
                error:function(data){
                     alert("添加失败")
                   },
                  data:{
                        name:$("#name").val(),
                        sex:Sex,
                        date:$("#date").val(),
                        department:$("#department").val(),
                        salary:$("#salary").val(),
                        mob:$("#mob").val(),
                        state:State,
                     },
            })

        })
       $(".deleat").click(function(){
          var Id=$(this).closest("tr").find(".id").html();
          console.log(Id);
            $.ajax({
                  url:"http://127.0.0.1:81/del",
                  async:true,
                  method:"GET",
                  success:function(data){
                            alert("删除成功");
                          },
                  error:function(data){
                          alert("删除失败")
                      },
                  data:{
                      id:Id,
                     },
                });
           $(this).closest("tr").remove();
        })
    }
  </script>
    <style>
      *{margin:0;padding:0;}
      .hide{
        display:none;
      }
      .edit span:hover{color:#f00;}
      .edit span{
        cursor:pointer;
      }
      .mask{
        position:absolute;
        width:100%;
        background-color:rgba(0,0,0,0.3);
        top:0;
        left:0;
      }
      .popup{
        background-color:#fff;
        padding:10px;
        display:none;
        position:absolute;
        width:300px;
        height:200px;
        z-index: 2;
        left:35%;
        top:50%;
      }
      .killMargin{
        overflow:hidden;
      }
     input{
      padding-left: 5px;
      font-size: 14px;
      outline: none;
     }
     #body{
      width: 1800px;
      height: 980px;
      background: rgba(0,0,0,0.6);
      position: absolute;
      top: 0px;
      left: 0px;
      display: none;
     }
     #infor{
      margin:auto;
      width: 400px;
      height: 500px;
      background: #fff;
      padding-left: 20px;
      font-size: 18px;
     }
      #infor>input{
        margin-top: 20px;
     }
     .kongge{
        padding-left: 36px;
     }
     #quixao{
          margin:15px 60px;
     }
     #queding{
          margin:15px 60px;
     }
    </style>
</head>
<body>
  <div id="body">
      <div id="infor">
          姓<span class="kongge"></span>名：<input type="text" id="name"><br>
          性<span class="kongge"></span>别：<input type="radio" class="sex" value="男" name="1" checked>男 <input type="radio" class="sex" name="1" value="女"> 女<br>
          出生日期：<input id="date" type="text" placeholder="2000-01-01"><br>
          所属部门：<input type="text" id="department"><br>
          薪<span class="kongge"></span>资：<input type="text" id="salary"><br>
          手<span class="kongge"></span>机：<input type="text" id="mob"><br>
          在职状态：<input type="radio" class="state" name="2" checked value="在职">在职 <input type="radio" name="2" value="离职" class="state"> 离职<br>
          <button id="queding" class="btn btn-success">确定</button>
          <button id="quxiao" class="btn btn-info">取消</button>
      </div>
  </div>
  <div class="killMargin">
    <div class="right">
      <button id="newbut" class="btn btn-success">+新增员工</button>
      <hr>
      <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>所属部门</th>
            <th>薪资</th>
            <th>手机</th>
            <th>在职状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
              <tr id="tem" class="hide">
                  <td class="id"></td>
                  <td class="name"></td>
                  <td class="sex"></td>
                  <td class="date"></td>
                  <td class="department"></td>
                  <td class="salary"></td>
                  <td class="mob"></td>
                  <td class="state"></td>
                  <td class="edit">
                      <span class="btn btn-warning insertData">编辑</span>
                      <span class="btn btn-danger deleat">删除</span>
                  </td>
              </tr>
        </tbody>
      </table>

    </div>
    <div class="popup">
      <button class="btn btn-primary" id="confirm">确定</button>
      <button id="cancel" class="btn">取消</button>
    </div>
  </div>
</body>
</html>